<template>
  <!--线切记录-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>单晶编号</label><el-input v-model="searchList.crystalNo"></el-input>
      <!-- <label>线切时间</label>
      <el-input type="date" v-model="searchList.date1"></el-input>至<el-input type="date" v-model="searchList.date2"></el-input> -->
        <label style="width:100px">线切开始时间:</label>
              <el-date-picker
                v-model="startDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
              <label style="width:100px">线切结束时间:</label>
              <el-date-picker
                v-model="endDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
      <el-button @click="searchRows"><i class="el-icon-search"></i>查询</el-button>
    </el-form>
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <el-button @click="editRow"><i class="jc_icon"></i>编辑</el-button>
      <el-button @click="deleteRows"><i class="jc_icon"></i>删除</el-button>
      <el-button @click="exportRows"><i class="jc_icon"></i>导出</el-button>
      <el-button @click=""><i class=""></i>打印</el-button>
    </el-button-group>
    <el-table :data="list"  :height="tableHeight"  border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="80px">
      </el-table-column>
      <el-table-column label='单晶编号' width="220px" fixed>
        <template scope="scope">
          {{scope.row.crystalNo}}
        </template>
      </el-table-column>
      <el-table-column label='棒长(mm)' width="100">
        <template scope="scope">
          {{scope.row.stickLength}}
        </template>
      </el-table-column>
      <el-table-column label='崩切段长度(mm)' width="120">
        <template scope="scope">
          {{scope.row.bengqieLength}}
        </template>
      </el-table-column>
      <el-table-column label='机台号' width="100">
        <template scope="scope">
          {{scope.row.machineNo}}
        </template>
      </el-table-column>
      <el-table-column label='领料员' width="100">
        <template scope="scope">
          {{scope.row.lingliaoName}}
        </template>
      </el-table-column>
      <el-table-column label='领料时间' width="200">
        <template scope="scope">
          {{scope.row.lingliaoDate}}
        </template>
      </el-table-column>
      <el-table-column label='理论出片数'  width="100">
        <template scope="scope">
          {{scope.row.theoretical}}
        </template>
      </el-table-column>
      <el-table-column label='全液第几刀'  width="100">
        <template scope="scope">
          {{scope.row.dijidao}}
        </template>
      </el-table-column>
      <el-table-column label='上料员'>
        <template scope="scope">
          {{scope.row.chargeName}}
        </template>
      </el-table-column>
      <el-table-column label='上料时间'  width="200">
        <template scope="scope">
          {{scope.row.chargeDate}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮记录人' width="100">
        <template scope="scope">
          {{scope.row.caolunName}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮记录时间'  width="200">
        <template scope="scope">
          {{scope.row.caolunDate}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮厂家' width="100">
        <template scope="scope">
          {{scope.row.caolunManufacturers}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮直径' width="100">
        <template scope="scope">
          {{scope.row.caolunDiameter}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮系数' width="100">
        <template scope="scope">
          {{scope.row.caolunCoefficient}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮/滑轮使用时间'  width="200">
        <template scope="scope">
          {{scope.row.caolunEmploy}}
        </template>
      </el-table-column>
      <el-table-column label='钢线记录人' width="100">
        <template scope="scope">
          {{scope.row.gangxianName}}
        </template>
      </el-table-column>
      <el-table-column label='钢线记录时间'  width="200">
        <template scope="scope">
          {{scope.row.gangxianDate}}
        </template>
      </el-table-column>
      <el-table-column label='钢线厂家' width="100">
        <template scope="scope">
          {{scope.row.gangxianManufacturers}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮直径' width="100">
        <template scope="scope">
          {{scope.row.gangxianDiameter}}
        </template>
      </el-table-column>
      <el-table-column label='线网长度' width="100">
        <template scope="scope">
          {{scope.row.gangxianLength}}
        </template>
      </el-table-column>
      <el-table-column label='新线网使用刀次' width="120">
        <template scope="scope">
          {{scope.row.gangxianCount}}
        </template>
      </el-table-column>
      <el-table-column label='冷却液记录人'  width="120">
        <template scope="scope">
          {{scope.row.lengqueyeName}}
        </template>
      </el-table-column>
      <el-table-column label='冷却液记录时间'  width="200">
        <template scope="scope">
          {{scope.row.lengqueyeDate}}
        </template>
      </el-table-column>
      <el-table-column label='冷却液类型' width="100">
        <template scope="scope">
          {{scope.row.lengqueyeType}}
        </template>
      </el-table-column>
      <el-table-column label='冷却液量' width="100">
      <template scope="scope">
        {{scope.row.lengqueyeQuantity}}
        </template>
    </el-table-column>
      <el-table-column label='消泡剂' width="100">
        <template scope="scope">
          {{scope.row.lengqueyeDefoamer}}
        </template>
      </el-table-column>
      <el-table-column label='全液刀次' width="100">
        <template scope="scope">
          {{scope.row.lengqueyeCount}}
        </template>
      </el-table-column>
      <el-table-column label='下料员' width="100">
        <template scope="scope">
          {{scope.row.materialName}}
        </template>
      </el-table-column>
      <el-table-column label='下料时间'  width="200">
        <template scope="scope">
          {{scope.row.materialDate}}
        </template>
      </el-table-column>
      <el-table-column label='自损异常记录人'  width="120">
        <template scope="scope">
          {{scope.row.anomalyName}}
        </template>
      </el-table-column>
      <el-table-column label='自损异常记录时间'  width="200">
        <template scope="scope">
          {{scope.row.anomalyDate}}
        </template>
      </el-table-column>
      <el-table-column label='掉/碎片数' width="100">
        <template scope="scope">
          {{scope.row.anomalySuipian}}
        </template>
      </el-table-column>
      <el-table-column label='跳线根数' width="100">
        <template scope="scope">
          {{scope.row.anomalyTiaoxian}}
        </template>
      </el-table-column>
      <el-table-column label='切后剩余线量' width="120">
        <template scope="scope">
          {{scope.row.anomalyResidue}}
        </template>
      </el-table-column>
      <el-table-column label='头/尾部甩切厚度' width="120">
        <template scope="scope">
          {{scope.row.anomalyThickness}}
        </template>
      </el-table-column>
      <el-table-column label='异常描述'  width="200">
        <template scope="scope">
          {{scope.row.anomalyDescription}}
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" :page-size="10"/>-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="changePage"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--编辑-->
    <el-dialog title="编辑" :visible.sync="edit_visible" class="jc_dialog_wrap">
      <el-form :model="form_edit" label-width="120px">
        <el-form-item label="单晶编号">
          <el-input v-model="form_edit.crystalNo"></el-input>
        </el-form-item>
        <el-form-item label="棒长(mm)">
          <el-input v-model="form_edit.stickLength"></el-input>
        </el-form-item>
        <el-form-item label="崩切段长度(mm)">
          <el-input v-model="form_edit.bengqieLength"></el-input>
        </el-form-item>
        <el-form-item label="机台号">
          <el-input v-model="form_edit.machineNo"></el-input>
        </el-form-item>
        <el-form-item label="领料员">
          <el-input v-model="form_edit.lingliaoName"></el-input>
        </el-form-item>
        <el-form-item label="领料时间">
          <el-input v-model="form_edit.lingliaoDate"></el-input>
        </el-form-item>
        <el-form-item label="理论出片数">
          <el-input v-model="form_edit.theoretical"></el-input>
        </el-form-item>
        <el-form-item label="全液第几刀">
          <el-input v-model="form_edit.dijidao"></el-input>
        </el-form-item>
        <el-form-item label="上料员">
          <el-input v-model="form_edit.chargeName"></el-input>
        </el-form-item>
        <el-form-item label="上料时间">
          <el-input v-model="form_edit.chargeDate"></el-input>
        </el-form-item>
        <el-form-item label="槽轮记录人">
          <el-input v-model="form_edit.caolunName"></el-input>
        </el-form-item>
        <el-form-item label="槽轮记录时间">
          <el-input v-model="form_edit.caolunDate"></el-input>
        </el-form-item>
        <el-form-item label="槽轮厂家">
          <el-input v-model="form_edit.caolunManufacturers"></el-input>
        </el-form-item>
        <el-form-item label="槽轮直径">
          <el-input v-model="form_edit.caolunDiameter"></el-input>
        </el-form-item>
        <el-form-item label="槽轮系数">
          <el-input v-model="form_edit.caolunCoefficient"></el-input>
        </el-form-item>
        <el-form-item label="槽轮/滑轮使用时间">
          <el-input v-model="form_edit.caolunEmploy"></el-input>
        </el-form-item>
        <el-form-item label="钢线记录人">
          <el-input v-model="form_edit.gangxianName"></el-input>
        </el-form-item>
        <el-form-item label="钢线记录时间">
          <el-input v-model="form_edit.gangxianDate"></el-input>
        </el-form-item>
        <el-form-item label="钢线厂家">
          <el-input v-model="form_edit.gangxianManufacturers"></el-input>
        </el-form-item>
        <el-form-item label="槽轮直径">
          <el-input v-model="form_edit.gangxianDiameter"></el-input>
        </el-form-item>
        <el-form-item label="线网长度">
          <el-input v-model="form_edit.gangxianLength"></el-input>
        </el-form-item>
        <el-form-item label="新线网使用刀次">
          <el-input v-model="form_edit.gangxianCount"></el-input>
        </el-form-item>
        <el-form-item label="冷却液记录人">
          <el-input v-model="form_edit.lengqueyeName"></el-input>
        </el-form-item>
        <el-form-item label="冷却液记录时间">
          <el-input v-model="form_edit.lengqueyeDate"></el-input>
        </el-form-item>
        <el-form-item label="冷却液类型">
          <el-input v-model="form_edit.lengqueyeType"></el-input>
        </el-form-item>
        <el-form-item label="冷却液量">
          <el-input v-model="form_edit.lengqueyeQuantity"></el-input>
        </el-form-item>
        <el-form-item label="消泡剂">
          <el-input v-model="form_edit.lengqueyeDefoamer"></el-input>
        </el-form-item>
        <el-form-item label="全液刀次">
          <el-input v-model="form_edit.lengqueyeCount"></el-input>
        </el-form-item>
        <el-form-item label="下料员">
          <el-input v-model="form_edit.materialName"></el-input>
        </el-form-item>
        <el-form-item label="下料时间">
          <el-input v-model="form_edit.materialDate"></el-input>
        </el-form-item>
        <el-form-item label="自损异常记录人">
          <el-input v-model="form_edit.anomalyName"></el-input>
        </el-form-item>
        <el-form-item label="自损异常记录时间">
          <el-input v-model="form_edit.anomalyDate"></el-input>
        </el-form-item>
        <el-form-item label="掉/碎片数">
          <el-input v-model="form_edit.anomalySuipian"></el-input>
        </el-form-item>
        <el-form-item label="跳线根数">
          <el-input v-model="form_edit.anomalyTiaoxian"></el-input>
        </el-form-item>
        <el-form-item label="切后剩余线量">
          <el-input v-model="form_edit.anomalyResidue"></el-input>
        </el-form-item>
        <el-form-item label="头/尾部甩切厚度">
          <el-input v-model="form_edit.anomalyThickness"></el-input>
        </el-form-item>
        <el-form-item label="异常描述">
          <el-input v-model="form_edit.anomalyDescription"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确定</el-button>
        <el-button @click="edit_visible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import * as WireStick from "../../api/report/wireStick";
  var moment = require('moment');
  export default {
    components: {

    },
    data() {
      return {
        searchList: {pageSize: '',crystalNo: '',date1: '',date2: ''},
        list: [],
        total: 0,
        create_visible: false,
        detail_visible: false,
        edit_visible: false,
        form_create: {},
        form_detail: {},
        form_edit: {},
        multipleSelection: [],
        crystalNo: '',
        startDate:'',
        endDate:'',
        pageSize: 10,
        currentPage: 1,
      }

    },
    created() {
      // this.fetchData()
    },
    methods: {
      fetchData(p=1) {
        this.listLoading = true;
        this.searchList.pageNum = this.currentPage = p;
        this.searchList.pageSize = this.pageSize;
        WireStick.getList(this.searchList).then(data => {
          //console.log('data',data.rows);
          this.list = data.rows;
          this.total = parseInt(data.total);
          this.listLoading = false;
        })

      },
      searchRows() {
        // this.searchList.date1 = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        // this.searchList.date2 = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        if( !this.startDate == ''){
          this.searchList.date1 = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList.date1 = ''
        }
        if(!this.endDate == ''){
            this.searchList.date2 = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList.date2 = ''
        }
        this.fetchData()
      },
      deleteRows() {
        if(this.multipleSelection.length===0) {
          alert('请选择行');
        }else {
          var ids = [];
          for(var i in this.multipleSelection) {
            ids.push(this.multipleSelection[i].id)
          }
          this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            WireStick.delRows({ids: ids.join(',')}).then(data => {
              this.fetchData();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      editRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else if(this.multipleSelection.length >= 2) {
          alert('每次只能查看一行数据，请只勾选一行');
        }else if(this.multipleSelection.length === 1){
          this.edit_visible = true;
          WireStick.detailRow(this.multipleSelection[0].id).then(data => {
            this.form_edit = data.msg;
          });
        }
      },
      submitEditForm() {
        WireStick.updateRow(this.form_edit).then(data => {
          this.edit_visible = false;
          this.fetchData();
        })
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      changePage(p) {
        this.fetchData(p)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        this.fetchData(1);

      },
      exportRows() {
        window.location.href=process.env.BASE_API+'/wireProcess/export?crystalNo='+this.searchList.crystalNo+'&date1='+this.searchList.date1+'&date2='+this.searchList.date2;
      },
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      }
    },
    mounted () {
      this.startDate = moment.utc(moment().subtract(1, 'days').format('YYYY-MM-DD 00:30:00')).format();
      this.endDate = moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
      this.searchRows();
    }
  }
</script>
